<script setup lang="ts">
    import axios from 'axios'
    import {onMounted, reactive, ref} from 'vue'
    import adduser from './addUser.vue'
    import { ElMessage } from 'element-plus'


    const  data = ref([]) 
    const queryName=ref()

    const getUserInfo = async ()=>{ 
      await axios.get(`http://localhost:8080/users`).then(response =>{
        data.value = response.data
        // console.log(response)
      })
    }
    
const test = () =>{
  console.log("调用成功")
  getUserInfo()
}   

const handleDelete = (id) =>{
  axios.delete(`http://localhost:8080/users/`+id).then((response) => {
         if(response.data){
          ElMessage('删除成功')
         }else{
          ElMessage('删除失败')
         }
            }).finally(()=>{
              getUserInfo()
            })
}

const handlegetbyid = async (id) =>{
  await axios.get(`http://localhost:8080/users/` + id).then(response =>{
        // data.value = response.data
        console.log(response.data)
      })
}

const formRef = ref()
const handleadd = (type: string) =>{
  formRef.value.open(type)
}
const handleEdit = (type: string, id?: number) =>{
  formRef.value.open(type,id)
}

const handleByName = async () =>{
  await axios.post(`http://localhost:8080/users/` + queryName.value).then(response =>{
         data.value = response.data
      })
}
    onMounted(() => {
      getUserInfo()
    })
    </script>
    
    <template>
  <el-space direction="vertical" alignment="normal" >
      <el-row :gutter="20">
        <template #default="scope">
          <el-input style="width: 240px" placeholder="请输入用户名称" v-model="queryName"/>&ensp;
          <el-button
          size="small"
          type="danger"
          @click="handleByName"
          >
          查询
        </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
          <el-button
          size="small"
          type="danger"
          @click="handleadd('create')"
        >
          新增
        </el-button>
        </template>
      </el-row>        

    <el-table :data="data" border style="width: 100%">
        <el-table-column prop="id" label="用户ID" width="180" />
        <el-table-column prop="username" label="用户账号" width="180" />
        <!-- <el-table-column prop="password" label="密码" /> -->
        <el-table-column prop="nickname" label="用户昵称" width="110" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="dept_id" label="部门ID" />
        <el-table-column prop="post_ids" label="岗位编号数组" width="110" />
        <el-table-column prop="email" label="用户邮箱" width="110" />
        <el-table-column prop="mobile" label="手机号码" width="120" />
        <el-table-column prop="sex" label="用户性别" width="110" />
        <el-table-column prop="avatar" label="头像地址" width="110" />
        <el-table-column prop="status" label="帐号状态" width="110" />
        <el-table-column prop="login_ip" label="最后登录IP" width="110" />
        <el-table-column prop="login_date" label="最后登录时间" width="110" />
        <el-table-column prop="creator" label="创建者" />
        <el-table-column prop="create_time" label="创建时间" width="110" />
        <el-table-column prop="updater" label="更新者" />
        <el-table-column prop="update_time" label="更新时间" width="110" />
        <el-table-column prop="deleted" label="是否删除" width="110" />
        <el-table-column prop="tenant_id" label="租户编号" width="110"/>

        <el-table-column align="center" width="300" label="操作">

          <template #default="scope">
            <el-button size="small" @click="handleEdit('update',scope.row.id)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        
      </el-table>

    </el-space>

    <adduser  ref="formRef" @success="test"/>
    </template>
    
    <style scoped>
      .div{
        height: 50px;
      }
    </style> 

    